<template>
  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
    <el-row>
      <el-col :span="12">
        <el-form-item prop="tplCategory" label="生成模板">
          <el-select v-model="info.tplCategory" @change="tplSelectChange">
            <el-option label="单表（增删改查）" value="crud" />
            <el-option label="树表（增删改查）" value="tree" />
            <!-- <el-option label="主子表（增删改查）" value="sub" /> -->
          </el-select>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item prop="tplWebType">
          <span >前端类型</span>
          <el-select v-model="info.tplWebType">
            <el-option label="Vue3 Element Plus 模版" value="element-plus" />
          </el-select>
        </el-form-item>
      </el-col> -->
      <el-col :span="12">
        <el-form-item prop="packageName" label="生成包路径">
          <template #label>
            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
              <div style=" margin-top: 1px;"><icon-info theme="outline" size="16" fill="#999" /></div>
            </el-tooltip>
            生成包路径
          </template>
          <el-input v-model="info.packageName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="moduleName" label="生成模块名">
          <template #label>
            <el-tooltip content="可理解为子系统名，例如 system" placement="top">
              <div style=" margin-top: 1px;"><icon-info theme="outline" size="16" fill="#999" /></div>
            </el-tooltip>
            生成模块名
          </template>
          <el-input v-model="info.moduleName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="businessName" label="生成业务名">
          <template #label>
            <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
              <div style=" margin-top: 1px;"><icon-info theme="outline" size="16" fill="#999" /></div>
            </el-tooltip>
            生成业务名
          </template>
          <el-input v-model="info.businessName" />
        </el-form-item>
      </el-col>

     <el-col :span="12">
        <el-form-item prop="functionName" label="生成功能名">
          <template #label>
            <el-tooltip content="用作类描述，例如 用户" placement="top">
              <div style=" margin-top: 1px;"><icon-info theme="outline" size="16" fill="#999" /></div>
            </el-tooltip>
            生成功能名
          </template>
          <el-input v-model="info.functionName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="genType" label="生成代码方式">
          <template #label>
            <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
              <div style=" margin-top: 1px;"><icon-info theme="outline" size="16" fill="#999" /></div>
            </el-tooltip>
            生成代码方式
          </template>
          <el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
          <el-radio v-model="info.genType" label="1">自定义路径</el-radio>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="上级菜单">
          <template #label>
            <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
              <div style=" margin-top: 1px;"><icon-info theme="outline" size="16" fill="#999" /></div>
            </el-tooltip>
            上级菜单
          </template>
           <!-- <treeselect
            :append-to-body="true"
            v-model="info.parentMenuId"
            :options="menus"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="请选择系统菜单"
          /> -->
          <el-tree-select
            v-model="info.parentMenuId"
            :data="menuOptions"
            check-strictly
            :props="treeProps"
            :render-after-expand="false"
          />
          <!-- <TreeSelect
              v-if="treeis"
              ref="myTreeSelect"
              :modelValue="info.parentMenuId"
              :treeData="menuOptions"
              :defaultProps="{'id':'menuId','label':'menuName','children':'children'}"
              ></TreeSelect> -->
        </el-form-item>
      </el-col>

      <el-col :span="24" v-if="info.genType == '1'">
        <el-form-item prop="genPath" label="自定义路径">
          <template #label>
            <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
              <div style=" margin-top: 1px;"><icon-info theme="outline" size="16" fill="#999" /></div>
            </el-tooltip>
            自定义路径
          </template>
          <el-input v-model="info.genPath">
            <!-- <el-dropdown >
              <el-button type="primary">
                最近路径快速选择
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <template #dropdown>
              <el-dropdown-menu >
                <el-dropdown-item @click="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
              </el-dropdown-menu>
            </template>
            </el-dropdown> -->
            <template #append  ><span @click="info.genPath = '/'" style="cursor: pointer;">恢复默认的生成基础路径</span></template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-show="info.tplCategory == 'tree'">
      <span class="form-header">其他信息</span>
      <el-divider />
      <el-col :span="12">
        <el-form-item label="树编码字段">
          <span >
            
            <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeCode" placeholder="请选择">
            <el-option
              v-for="(column, index) in info.columns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="树父编码字段">
          <span >
            
            <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeParentCode" placeholder="请选择">
            <el-option
              v-for="(column, index) in info.columns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="树名称字段">
          <span >
            
            <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeName" placeholder="请选择">
            <el-option
              v-for="(column, index) in info.columns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="info.tplCategory == 'sub'">
      <span class="form-header">关联信息</span>
      <el-divider />
      <el-col :span="12">
        <el-form-item label="关联子表的表名">
          <span >
            
            <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
            <el-option
              v-for="(table, index) in tables"
              :key="index"
              :label="table.tableName + '：' + table.tableComment"
              :value="table.tableName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="子表关联的外键名">
          <span >
            
            <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.subTableFkName" placeholder="请选择">
            <el-option
              v-for="(column, index) in subColumns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col> 
    </el-row>
  </el-form>
</template>

<script>
// import Treeselect from "@riophae/vue-treeselect";
// import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import TreeSelect from '@/components/TreeSelectMenu/index.vue'
import { computed,reactive,watch,toRefs,getCurrentInstance, ref} from 'vue'
export default defineComponent({
  components:{
    TreeSelect
  },
  props: {
    info: {
      type: Object,
      default: null
    },
    tables: {
      type: Array,
      default: null
    },
    menus: {
      type: Array,
      default: []
    },
  },
  setup(props,context){
    const { proxy } = getCurrentInstance();//关键代码
    const myTreeSelect=ref(null)
    const genInfoForm=ref(null)
    const staticData=reactive({
      treeis:false,
      treeProps:{
        label: 'menuName', // 设置节点显示的字段，默认为 'label'
        children: 'children', // 设置子节点的字段，默认为 'children'
        value:'menuId',
        isLeaf: 'leaf', // 设置判断是否叶子节点的字段，默认为 'isLeaf'
      },
      // 菜单树选项
    menuOptions: [],
      subColumns: [],
      info:props.info,
      tables:props.tables,
      menus:props.menus,
      rules: {
        tplCategory: [
          { required: true, message: "请选择生成模板", trigger: "blur" }
        ],
        packageName: [
          { required: true, message: "请输入生成包路径", trigger: "blur" }
        ],
        moduleName: [
          { required: true, message: "请输入生成模块名", trigger: "blur" }
        ],
        businessName: [
          { required: true, message: "请输入生成业务名", trigger: "blur" }
        ],
        functionName: [
          { required: true, message: "请输入生成功能名", trigger: "blur" }
        ],
      }
    })
    const size = computed(() => {
        return store.getters['setting/size'];
    });

    const small =computed(() => {
      return size.value=='small'?true:false
    });
    watch(
      () => staticData.info.subTableName,
      (val) => {
        proxy.setSubTableColumns(val);
      }
    );
    // watch(() =>  staticData.info.subTableName, (newValue, oldValue) => {
    //     console.log('watch 已触发', newValue)
    // })
    // watch(
    //   () => info.value.tplWebType,
    //   (val) => {
    //     if (val === '') {
    //       info.value.tplWebType = "element-ui";
    //     }
    //   }
    // );
    onMounted(() => {
      staticData.treeis=true
      staticData.menuOptions = [];
      const menu = { menuId: 0, menuName: '主类目', children: [] };
      menu.children = proxy.$handleTree(props.menus, "menuId");
      staticData.menuOptions.push(menu);
      console.log(staticData.menuOptions)
    })
    const validates = () => {
      // 在子组件中定义表单验证的逻辑
      console.log("---------在子组件中定义表单验证的逻辑----------")
       //genInfoForm.value.validate()
       return genInfoForm.value.validate(valid => {
        if (valid) {
          return true
        }else{
          return false
        }
      }) 
    };
    const modeldata = () => {
        return staticData.info;
    };
  const methods={

    /** 选择子表名触发 */
    subSelectChange(value) {
      staticData.info.subTableFkName = '';
    },
    /** 选择生成模板触发 */
    tplSelectChange(value) {
      if(value !== 'sub') {
        staticData.info.subTableName = '';
        staticData.info.subTableFkName = '';
      }
    },
    /** 设置关联外键 */
    setSubTableColumns(value) {
      for (var item in staticData.tables) {
        const name = staticData.tables[item].tableName;
        if (value === name) {
          staticData.subColumns = staticData.tables[item].columns;
          break;
        }
      }
    }
  }
  return {
      size,
      small,
      ...methods,
      genInfoForm,
      validates,
      modeldata,
      myTreeSelect,
      ...toRefs(staticData)
    }
  }
})
</script>
